<template >
  <div class="login">
    <div class="box">
  <el-card class="box-card">
    <header>
      <div class="card-header">
        <span>医生登录</span>
      </div>
    </header>
    <div class="text item">
      <el-form ref="formRef" :model="loginForm" label-width="120px">
        <el-form-item label="医生电话">
          <el-input v-model="loginForm.phone">医生电话</el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="loginForm.password" type="password">登录密码</el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</div>
</div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { setSessionStorage } from "../common.js";
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8081/";

export default {
  setup() {
    const router = useRouter();

    const state = reactive({
      loginForm: {
        phone: "",
        password: "",
      },
    });

    const login = () => {
      if(state.loginForm.phone==''){
        alert('电话不能为空！');
        return;
      }
      if(state.loginForm.password==''){
        alert('密码不能为空！');
        return;
      }

      axios
        .post("doctor/login", state.loginForm)
        .then((response) => {
          let doctor = response.data.data;
          setSessionStorage("doctor", doctor);
          router.push("/ordersList");
        })
        .catch((error) => {
            // 错误处理逻辑，比如400 Bad Request就会来到这里
            if (error.response) {
              // 请求已发出，但服务器响应的状态码不在2xx范围内
              console.error("Server responded with a non-2xx status:", error.response.status);
              console.log("Server response data:", error.response.data);
              alert("登录失败：" + error.response.data.msg || "请检查您的输入是否有误");
            } else if (error.request) {
              // 请求发出了，但没有收到响应
              console.error("No response received:", error.request);
            } else {
              // 发生了一些配置错误或网络中断等
              console.error("Error setting up the request:", error.message);
            }
            });
    };

    return {
      ...toRefs(state),
      login,
    };
  },
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px; /* 添加内边距以提升标题区域的视觉效果 */
}

.text {
  font-size: 14px;
}

.box{
  margin:0px;
  height:100%;
  display: flex;
}
.item {
  margin-bottom: 18px;
}

.box-card {
  width: 400px;
  height: 250px;
  margin: 0 auto;
  margin-top: 150px;
}
.el-input {
  width: 100%;
}

.el-button--primary {
  width: 100%;
  margin-top: 16px;
}

.login{
  background-image: url("../assets/picture1.jpg");
 background-size: cover;
 height: 100vh;
 background-repeat: no-repeat;
 background-position: center;
 place-items: center;
}
</style>